<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { state } from './state';
import { showToast, navigateTo, eventCenter, getCurrentInstance } from '@tarojs/taro';
import IMG_ICON_PARK_QUERY_CAR from '/@/assets/image/icon/park-query-car.png';
onMounted(() => {
  eventCenter.on(getCurrentInstance().router?.onShow as string, () => {
    //清空查询车辆
    licensePlate.value = '';
  });
});
const licensePlate = ref('');

function change(val: any) {
  state.pass = val.pass;
  state.value = val.value;
  console.log('licensePlate.value=', licensePlate);
}

function queryCar() {
  if (state.pass) {
    navigateTo({
      url: '/pages/park/query-result/index?plateNo=' + state.value,
    });
  } else {
    showToast({
      title: '请输入完整车牌号！',
      icon: 'error',
    });
  }
}
</script>

<template>
  <view class="park-query app-page--1">
    <app-navbar title="车辆查询" />
    <scroll-view
      class="app-page__wrapper"
      :scroll-y="true"
      :lower-threshold="100"
      @click.stop="state.isHide = !state.isHide"
    >
      <view class="park-query__wrapper">
        <view class="park-query__content">
          <image :src="IMG_ICON_PARK_QUERY_CAR" />
          <view class="park-query__plate">
            <app-license-plate
              v-model="licensePlate"
              @change="change"
              :isHide="state.isHide"
            ></app-license-plate>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="park-query__footer">
      <nut-button block type="info" @click="queryCar()">查询车辆</nut-button>
    </view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
